{% extends "base.html" %}
{% load static %} 
{% load sass_tags %}

{% block other_css %}
<link href="{% sass_src 'front/scss/landing/landing.scss' %}" rel="stylesheet" type="text/css" />

<!-- Stylings for favorite buttons -->
<link href="{% static 'custom/css/favoriteButtonStylings.css' %}" rel="stylesheet" type="text/css" />

{% endblock %}

{% block sideDashBoard %}

	{% include "sideDashboard.html"%}

{% endblock %}

{% block content %}
{% if user.is_authenticated %}
{% if request.user.groups.all.0.name != "jobseeker" %}
{% if request.user.groups.all.0.name != "company_owner" %}
<h1>
	Choose whether you're a jobseeker or a company owner
</h1>
<h3 style="margin-top:30px;"> <a class="user btn-lg" href="{% url 'review' %}">Jobseeker (search for jobs, events, etc...)</a></h3>
                <h3 style="margin-top:20px;"> <a class="employer btn-lg" href="{% url 'company_profile_creator' %}">Company Owner</a></h3>
{% endif %}
{% endif %}
{% endif %}
<div class="container-fluid">
	<div class="searchBox">
		<h1 class='display-4 text-center jobSearching'>Job searching just got easier</h1>
		<button class='uploadResume' type="button"><span>Upload Resume</span></button>
		<div class="container">
			<div class='switchButtons'>
				<button data-tab-target="#job" class="findJob" type="button"><span>Find a Job</span></button>
				<button data-tab-target="#candidate" class='candidate' type="button"><span>Find a Candidate</span></button>
			</div>
			<div class="tab-content">
				<div class="row active" id="job" data-tab-content>
					<form class="form-inline" method="GET" action="{%url 'jobsearch'%}" novalidate>
						<div class="col-lg-3">
							<div class="form-group ">
								<div class='form-control lines'> {{PostingForm.title}} </div>
							</div>
						</div>
						<div class="col-lg-3">
							<div class="form-group">
								<div class="form-control lines">
									<div id="locationField"> 
									    {{ PostingForm.address }} 
									    {{ PostingForm.geolocation }} 
									    {{ PostingForm.media.js }} 
									 </div>
								</div>
							</div>
						</div>
						<div class="col-lg-3">
							<div class="form-group ">
								<label for="jobtype"></label>
								<select id="jobtype" class="form-control" name="jobtype" style="margin-right: -0px; border: .5px inset #495057">
									<option checkbox>Job Type</option> 
									    {% for jobtypes in jobtypes %}
									        <option value="{{jobtypes}}">{{ jobtypes }}</option>
									    {% endfor %} 
								</select>
							</div>
						</div>
						<button class="btn btn-secondary searchBtn2" type="submit"><i class="fa fa-search"></i> Search</button>
					</form>
				</div>
				<div class="row" id="candidate" data-tab-content>
					<div class="col-lg-3">
						<input id="category" type="text" class="form-control inputCandidate" placeholder="John Smith" aria-label="Recipient's username" aria-describedby="basic-addon2">
						<div class="iconBriefCase"> <span><i class="fa fa-briefcase" aria-hidden="true"></i></span> </div>
					</div>
					<div class="col-lg-3">
						<div clas="form-group">
							<div class="form-field">
								<input type="text" class="form-control" placeholder="Location" aria-label="Recipient's username" aria-describedby="basic-addon2"> 
							</div>
						</div>
					</div>
					<div class="col-lg-3">
						<div class="form-group " style="margin-bottom: 0">
							<div class="form-field">
								<div class="select-wrap">
									<div class="icon"><span class="ion-ios-arrow-down"></span></div>
									<select name="" id="" class="form-control">
										<option value="">Category</option>
										<option value="">Full Time</option>
										<option value="">Part Time</option>
										<option value="">Freelance</option>
										<option value="">Internship</option>
										<option value="">Temporary</option>
									</select>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-3">
						<div class="form-field">
							<button type="submit" class="form-control btn btn-secondary searchBtn"><span>Search</span></button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--<section class="industries">-->
<!--   <div class="industry">-->
<!--      <h5 class="home__name">positions</h5>-->
<!--      <h5 class="home__name">positions</h5>-->
<!--   </div>-->
<!--   <div class="industry">industry card </div>-->
<!--   <div class="industry">industry card</div>-->
<!--   <div class="industry">industry card</div>-->
<!--   <div class="industry">industry card</div>-->
<!--   <div class="industry">industry card</div>-->
<!--</section>-->
<section class="ftco-section">
    	<div class="container">
    		<div class="row justify-content-center mb-5 pb-3">
          <div class="col-md-7 heading-section text-center ftco-animate">
          	<span class="subheading">Job Categories</span>
            <h2 class="mb-4">Top Categories</h2>
          </div>
        </div>
        <div class="row">
               {% for category in categories %}
           <div class="col-lg-3 ftco-animate">
        		<ul class="category">

        			<li><a href="{% url 'search_page' %}?category={{category.id}}">{{category.name}}<br><span class="number">{{category.count}}</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>

          		</ul>
        	</div>
               {% endfor %}
<!--        	<div class="col-md-3 ftco-animate">-->

<!--        		<ul class="category">-->
<!--        			<li><a href="#">Aviation <br><span class="number">354</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>-->
<!--        			<li><a href="#">Aviation <br><span class="number">143</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>-->
<!--        			<li><a href="#">Aviation <br><span class="number">100</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>-->
<!--        			<li><a href="#">Aviation <br><span class="number">90</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>-->
<!--        		</ul>-->
<!--        	</div>-->
        </div>
    	</div>
    </section>
<section class="recentJobs">

   <div class=' postJob'>
         <h1 class='h1Recent'>Recent Jobs</h1>
        <form method="GET" action="{% url 'post_job' %}">
            <button class="jobPosting" type="submit"><span>Post a Job</span></button>
        </form>
   </div> 
   {% for job in new_jobs %}
   <div class="card w-75 job-post-item job-post-item-body">
      <div class="card-body row">
         <div class="col-md-6">
            <div class="job-post-item-header d-flex align-items-center">
            <h2 class="mr-3 text-black"><a href="{% url 'search_page' %}?job={{job.id}}">{{job.title}}</a></h2>
               <div class="badge-wrap">
                  <span class="
                  {% if  job.jobtype.name == 'Full Time' %}
                  bg-primary
                  {% elif job.jobtype.name == 'Part Time' %}
                  bg-success
                  {% elif job.jobtype.name == 'Internship' %}
                  bg-secondary
                  {% elif job.jobtype.name == 'Contract' %}
                  bg-warning
                  {% elif job.jobtype.name == 'Temporary' %}
                  bg-info
                  {% else %}
                  bg-info
                  {%endif%}
                  text-white badge py-2 px-3">{{job.jobtype.name}}</span>
               </div>
            </div>
            <div class="job-post-item-body d-block d-md-flex">
               <div class="mr-3"><span class="icon-layers"></span> <a href="#">{{job.company.name}}</a></div>
               <div>
                  <span class="icon-my_location"></span> <span>{{job.address}}</span></div>
            </div>
         </div>

         <div class="col-md-6">
            <div class="one-forth ml-auto d-flex align-items-center mt-4 md-md-0">
               <div class="applyIconBtn" >
				    <a href="Javascript:void(0);" class="outer unfavoritedBody d-flex justify-content-center align-items-center mr-2" value="{{job.id}}">
						<div class="heart fa fa-heart-o unfavoritedHeart"></div>
				 	</a> 
                   <!--<a href="#" class="icon text-center d-flex justify-content-center align-items-center icon mr-2">



					  <span class="icon-heart"> <i class="fa fa-heart" aria-hidden="true"></i></span> 
					 
					  

                  </a>  -->
               <button type="button" class="btn btn-primary py-2 applyJob" value ="{% url 'search_page' %}?job={{job.id}}" name="{% url 'quick_apply' job.id %}">Apply Job</button>
<!--				   href="{% url 'search_page' %}?job={{job.id}}"-->
               </div>
            </div>
         </div>
      </div>
   </div>
   <br>
   {% endfor %}
<!--   <div class="card w-75 job-post-item job-post-item-body">-->
<!--      <div class="card-body row">-->
<!--         <div class="col-md-6">-->
<!--            <div class="job-post-item-header d-flex align-items-center">-->
<!--            <h2 class="mr-3 text-black"><a href="#">FullStack Developer</a></h2>-->
<!--               <div class="badge-wrap">-->
<!--                  <span class="bg-info text-white badge py-2 px-3">Freelance</span>-->
<!--               </div>-->
<!--            </div>-->
<!--            <div class="job-post-item-body d-block d-md-flex">-->
<!--               <div class="mr-3"><span class="icon-layers"></span> <a href="#">Lockheed Martin</a></div>-->
<!--               <div>-->
<!--                  <span class="icon-my_location"></span> <span>Washington, DC</span></div>-->
<!--            </div>-->
<!--         </div>-->

<!--         <div class="col-md-6">-->
<!--            <div class="one-forth ml-auto d-flex align-items-center mt-4 md-md-0">-->
<!--               <div class="applyIconBtn" >-->
<!--                  <a href="#" class="icon text-center d-flex justify-content-center align-items-center icon mr-2">-->
<!--                     <span class="icon-heart"> <i class="fa fa-heart" aria-hidden="true"></i></span>-->
<!--                  </a>-->
<!--               <a href="{%url 'choose_register'%}" class="btn btn-primary py-2">Apply Job</a>-->
<!--               </div>-->
<!--            </div>-->
<!--         </div>-->
<!--      </div>-->
<!--   </div> -->
<!--   -->
<div class="modal fade" id="applyModal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
            <div class="modal-content">
                   <div class="modal-header">
                          <h5 class="modal-title">Would you like to apply with quick apply?</h5>
                    </div>
                   <div class="modal-body">
                         <div class="row">
                             <div class="col col-md-5">
                                    <a href="" class="btn btn-success float-right" id = "quickApply">Quick Apply</a>
                             </div>
                             <div class="col-md-2">
                                 <center>
                                     <small class="text-muted">
                                            Or
                                     </small>
                                 </center>
                             </div>
                             <div class="col col-md-5">
                                 <a href="" class="btn btn-primary" data-dismiss="modal" aria-label="Close" id="applyManually">Apply Manually</a>
                              </div>
                         </div>
                   </div>
            </div>
      </div>
</div>
</section>
{% endblock %}


{% block other_js %}

<!-- Favorite Button Styling Updating JavaScript -->
<script src="{% static 'custom/js/loadFavoriteButtons.js' %}"></script>

<!-- ??? -->
<script>
$(document).ready(function(){
	$(".applyJob").on("click", function(e){
		$("#applyModal").modal("show");
		$("#quickApply").attr("href", $(this).attr("name"));
		$("#applyManually").attr("href", $(this).val());
	});
});
</script>

{% endblock %}